<template>
  <el-card header="Object Block Records" class="mb-5">    
    <el-table :data="dataTable" :show-header="true" :highlight-current-row="true" :stripe="true" row-class-name="primary" style="width: 100%" @row-click="onTableRowClicked">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <el-table :data="props.row.detail" @row-click="onTableRowClicked">
              <el-table-column prop="label" label="label"></el-table-column>
              <el-table-column prop="value" label="value"></el-table-column>
              <el-table-column prop="desc" label="desc"></el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="refname" label="refname"></el-table-column>
      <el-table-column prop="position" label="position"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import Formater from "@/libs/tools/Formater.js";
export default {
  props: {
    data: Object,
    debug: Object,
  },
  data() {
    return {
      dataTable: [],
    };
  },
  created() {
    if (this.data) {
      this.dataTable = this.covertToTable(this.data);
    }    
  },
  watch: {
    data(newVal, oldVal) {
      this.dataTable = this.covertToTable(newVal);
    },
  },
  methods: {    
     covertToTable(data) {
      let dataTable = [];
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        let itemTable = {
          refname: item.refname.fullname,
          position: `${this.getPosition(item.positionDelta)} = ${Formater.number(item.positionDelta)}`,
          debug: this.debug.arr[i],
          detail: [
            {
              label: "object_prefix_length",
              value: item.objectPrefixLength.value,
              debug: item._debug.objectPrefixLength,
              desc: "",
            },
            {
              label: "ref_prefix",
              value: item.refname.prefix,
              debug: item._debug.refPrefixLength,
              desc: "",
            },
            {
              label: "object_suffix_length",
              value: item.objectSuffixLength,
              debug: item._debug.objectSuffixInfo,
              desc: "",
            },
            {
              label: "object_position_count",
              value: item.objectPositionCount,
              debug: item.objectCnt3 != 0 ? item._debug.objectSuffixInfo : item._debug.objectCntLarge,
              desc: "",
            },
            {
              label: "object_cnt_3",
              value: item.objectCnt3,
              debug: item._debug.objectSuffixInfo,
              desc: "",
            },
            {
              label: "object_cnt_large",
              value: item.objectCntLarge?.value,
              debug: item._debug.objectCntLarge,
              desc: "",
            },
            {
              label: "ref_suffix",
              value: item.refname.suffix,
              debug: item._debug.refname,
              desc: "",
            },
            {
              label: "position_delta",
              value: `${this.getPosition(item.positionDelta)} = ${Formater.number(item.positionDelta)}`,
              debug: item._debug.positionDelta,
              desc: "",
            },
          ]
        }
        dataTable.push(itemTable);
      }
      return dataTable;
    },

    getPosition(data) {
      let position = 0;
      for (let i = 0; i < data.length; i++) {
        position += data[i].value;
      }
      return position;
    },
    
    onTableRowClicked(row, column, event) {
      this.$emit('clicked', row);
    },
  },
  mounted() {

  },
  computed: {
    
  }
};
</script>